<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.dotting {
				display: inline-block;
				width: 10px;
				min-height: 2px;
				padding-right: 2px;
				border-left: 2px solid currentColor;
				border-right: 2px solid currentColor;
				background-color: currentColor;
				background-clip: content-box;
				box-sizing: border-box;
				animation: dot 4s infinite step-start;
					
			}
			:root .dotting {
				padding-left: 2px;
			}
			
			@keyframes dot {
				25% {
					border-color: transparent;
					background-color: transparent;
				}
				/* 0个点 */
				50% {
					border-right-color: transparent;
					background-color: transparent;
				}
				/* 1个点 */
				75% {
					border-right-color: transparent;
				}
				/* 2个点 */
			}
		</style>
	</head>

	<body>
		<span class="dotting"></span>
	</body>

</html>